<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQzoom 2 Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
<style type = "text/css">

body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}

.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}


ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}

.jqzoom{

	text-decoration:none;
	float:left;
}





</style>
<style type = "text/css">
/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH();
}
/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV();
}
/*顺时针旋转90度*/
.rotate90 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
   /*width:500px;
   height:500px;*/
}
/*顺时针旋转180度*/
.rotate180 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}
/*顺时针旋转270度*/
.rotate270 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
}
.rotate360 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
   -moz-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
}
</style>
<script type="text/javascript">

$(document).ready(function() {
	$('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            zoomWidth: 250,
            zoomHeight: 250,
            alwaysOn:false
        });
	
});


</script>
</head>

<body>
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
    <div class="clearfix">
        <a href="imgProd/triumph_big1.jpg" id="imgProd" class="jqzoom" rel='gal1'  title="triumph" style="height:250px;width:250px;" >
            <img src="imgProd/triumph_big1.jpg"  title="triumph" id="Imgbox"  style="border: 1px solid #666;width:250px;height:250px">
        </a>
    </div>
	<br/>
	
 <div class="clearfix" >
	<ul id="thumblist" class="clearfix" >
		<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_big1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
		<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
		<li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
	</ul>
	</div>
	<input type="button" value="向右旋转90" onclick="chg_rotate90();">
	<input type="button" value="向右旋转180" onclick="chg_rotate180();">
	<input type="button" value="向右旋转270" onclick="chg_rotate270();">
	<input type="button" value="向右旋转360" onclick="chg_rotate360();">
	<input type="input" id="input_msg"/>
</div>

 <script type="text/javascript">
	 	 var img = $("#Imgbox"); // Get my img elem
	 	 var pic_real_width, pic_real_height;
	 	 $("<img/>").attr("src", $(img).attr("src")) .load(function() {
	         pic_real_width = this.width;   // Note: $(this).width() will not
	         pic_real_height = this.height; // work for in memory images.
	         $("#input_msg").val(pic_real_width+','+pic_real_height);
	     });
		 function put_pod(o){
			// $(o).parent().attr("href",$(o).attr("src"));
		 }
      	function chg_rotate90(){
      		$("#input_msg").val(pic_real_width+','+pic_real_height);
            $('#Imgbox').attr('class', 'rotate90');
            $(".zoomWrapperImage >img").attr('class', 'rotate90');
            $(".zoomWrapperImage >img").width(pic_real_width);
            $(".zoomWrapperImage >img").height(pic_real_height-250);
            //$(".zoomWrapperImage").width('300');
            //$(".zoomWrapperImage").width(pic_real_width);
            //$(".zoomWrapperImage").height(pic_real_height);
            
        }
      	function chg_rotate180(){
            $('#Imgbox').attr('class', 'rotate180');
            $(".zoomWrapperImage >img").attr('class', 'rotate180');
            //$(".zoomWrapperImage >img").width('1280');
            //$(".zoomWrapperImage >img").height('1024');
            $(".zoomWrapperImage >img").width(pic_real_width);
            $(".zoomWrapperImage >img").height(pic_real_height-20);
            //$(".zoomWrapperImage").width('300');
        }
      	function chg_rotate270(){
            $('#Imgbox').attr('class', 'rotate270');
            $(".zoomWrapperImage >img").attr('class', 'rotate270');
            //$(".zoomWrapperImage >img").width('1280');
            //$(".zoomWrapperImage >img").height('1024');
            $(".zoomWrapperImage >img").width(pic_real_width);
            $(".zoomWrapperImage >img").height(pic_real_heigh-20);
           // $(".zoomWrapperImage").width('300');
        }
      	function chg_rotate360(){
            $('#Imgbox').attr('class', 'rotate360');
            $(".zoomWrapperImage >img").attr('class', 'rotate360');
            //$(".zoomWrapperImage >img").width('1280');
           // $(".zoomWrapperImage >img").height('1024');
            $(".zoomWrapperImage >img").width(pic_real_width);
            $(".zoomWrapperImage >img").height(pic_real_height);
           // $(".zoomWrapperImage").width('300');
        }
        </script>
</body></html>